<template>
    <div id="container" class="col">
      <nav-bar
        v-if="showCommonNavBar && !isIos"
        :title="titleText"
        :left-arrow="showBackBtn"
        @click-left="onClickLeft"
      />
      <div
        id="my_router_view"
        ref="routerContainerView"
        :class="isIos && showCommonNavBar ? 'ios_class' : ''"
      >
        <router-view></router-view>
      </div>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted } from "vue";
import router from "./router";
import {NavBar} from 'vant';
export default defineComponent({
  name: "App",
  components:{NavBar},
  setup() {
    const showCommonNavBar = ref(true);
    const showBackBtn = ref(true);
    const titleText = ref("");
    const isIos = false;

    const routerContainerView = ref<HTMLDivElement|null>(null);

    const setNavTitle = (title: string) => {
      if (isIos) {
        document.title = title;
      } else {
        titleText.value = title;
      }
    };
    
    onMounted(() => {
      router.afterEach((to) => {
        if (to.meta) {
          const meta = to.meta;
          if (meta.hideNavBar) {
            showCommonNavBar.value = false;
          } else {
            showCommonNavBar.value = true;
          }
          if (meta.title) {
            setNavTitle(meta.title as string);
          }
          if(meta.hideBack){
            showBackBtn.value = false;
          }else{
            showBackBtn.value = true;
          }
        }
        routerContainerView.value!.scrollTop = 0;
      });
    });

    const onClickLeft = () => {
      router.back();
    };

    return {
      titleText,
      showCommonNavBar,
      onClickLeft,
      isIos,
      showBackBtn,
      routerContainerView
    };
  },
});
</script>

<style>
#container {
  width: 100%;
  height: 100%;
}
#my_router_view {
  height: 0;
  flex: 1;
  overflow-y: auto;
}
.ios_class {
  /* padding-top: 10px; */
}
</style>
